import Vnode from './vnode'
//单个文件对象类
var httpPath = "http://q37f783146.qicp.vip/fengquan/"

export default class FileSlicingFile extends Vnode {
    constructor(state, fileSlicingObjectFactory, parentClass, index) {
        let type = state.file.name.split(".")[state.file.name.split(".").length - 1]
        let name = state.file.name
        let strNode = `
        <div class="updataItem">
            <div class="updataItemName">
            <span class="iconfont icon-FileSlicing-${type} updataItemNameIcon"></span>
                <span class="updataItemNameText">${name}</span>
            </div>
            <div class="updataItemProgress">
                <div class="second-bar-box">
                    <main class="perspective zjmccNum${0}" id="second-bar">
                        <section class="bar">
                            <div class="bar-face back percentage"></div>
                            <div class="bar-face floor percentage"></div>
                            <div class="bar-face roof percentage"></div>
                            <div class="bar-face front percentage"></div>
                            <div class="indicator">0%</div>
                        </section>
                        <input class="bar-input" type="range" min="0" max="100" value="0" />
                    </main>
                </div>
                <div class="second-bar-box-init">
                    <span class="load">
                        <span>文</span>
                        <span>件</span>
                        <span>初</span>
                        <span>始</span>
                        <span>化</span>
                        <span>...</span>
                    </span>
                </div>
                <span class="bottom stop">暂停</span>
                <span class="bottom continue">继续</span>
                <span class="bottom bottomFile">下载此文件</span>
                <span class="bottom remove">删除此项</span>
            </div>
        </div>
        `
        super(strNode);
        //保存父类，删除
        this.parentClass = parentClass
        //保存自己下标
        this.index = index
        //暂停键注册方法
        this.VNode.getElementsByClassName('stop')[0].onclick = (e) => { this.stop(e) }
        //继续键注册方法
        this.VNode.getElementsByClassName('continue')[0].onclick = (e) => { this.continue(e) }
        //下载键注册方法
        this.VNode.getElementsByClassName('bottomFile')[0].onclick = (e) => { this.bottomFile(e) }
        //下载键注册方法
        this.VNode.getElementsByClassName('remove')[0].onclick = (e) => { this.remove(e) }
        //创建工厂
        this.fileSlicingObjectFactory = fileSlicingObjectFactory;
        //获取文件处理对象
        this.flieDispose = this.fileSlicingObjectFactory.createObject('FlieDispose', [this.fileSlicingObjectFactory])
        //初始化基本信息
        this.name = name
        this.type = type
        this.progress = 0
        this.file = state.file
        //httpState是否启用
        this.httpState = true
        //需切块数
        this.sliceNum = state.sliceNum ? state.sliceNum : 10
        //已上传的块数
        this.oldSliceNum = 0
        //上传url
        this.updataUrl = state.updataUrl
        //下载文件信息查询url
        this.httpPathFileInfo = state.httpPathFileInfo
        //下载文件url
        this.httpPathlDownload = state.httpPathlDownload,
            //上传方法
            this.stateFileHttp = state.stateFileHttp
        //暂停方法
        this.stateStop = state.stateStop
        //继续方法
        this.stateContinue = state.stateContinue
        //下载方法
        this.stateNottomFile = state.stateNottomFile
        //删除方法
        this.stateRemove = state.stateRemove
        //切好的文件数组
        this.flieDispose.flieSlice(this.file, this.sliceNum).then(res => {
            //存储需要上传的文件碎片
            debugger
            this.flieSlice = res
            //原文件MD值
            this.md5 = res[0].get('id')
            //开始上传
            if (state.fileHttp) {
                state.fileHttp()
            } else {
                this.flieDispose.update(this.updataUrl, this)
            }
        })
    }
    setItem(state, callBack) {
        this.VNode.getElementsByClassName('second-bar-box')[0].style.display = 'flex'
        this.VNode.getElementsByClassName('second-bar-box-init')[0].style.display = 'none'
        for (const key in state) {
            switch (key) {
                case 'progress':
                    this.getAllInputs(state.progress)

                    if (state.progress === '100') {
                        this.bottomFileShow();
                    }
                    break;
                default:
                    this[key] = state[key]
                    //其他没有处理的回调给业务自己处理
                    if (callBack) {
                        callBack(this, key)
                    }
                    break;
            }
        }
    }
    remove(e, callBack) {
        //如有其他处理方式回调给业务自己处理
        if (callBack) {
            callBack(e, this)
        } else if (this.stateStstateRemoveop) {
            this.stateRemove()
        } else {
            this.VNode.parentNode.removeChild(this.VNode)
            this.parentClass.itemArry.splice(this.index, 1)
        }
    }
    stop(e, callBack) {
        //httpState是否启用
        this.httpState = false
        //如有其他处理方式回调给业务自己处理
        if (callBack) {
            callBack(e, this)
        } else if (this.stateStop) {
            this.stateStop()
        }
    }
    continue(e, callBack) {
        //httpState是否启用
        this.httpState = true
        //如有其他处理方式回调给业务自己处理
        if (callBack) {
            callBack(e, this)
        } else if (this.stateContinue) {
            this.stateContinue()
        } else {
            this.flieDispose.update(this.updataUrl, this)
        }
    }
    bottomFile(e, callBack) {
        if (callBack) {
            callBack(e, this)
        } else if (this.stateBottomFile) {
            this.stateContinue()
        } else {
            //创建文件处理对象
            let flieDispose = this.fileSlicingObjectFactory.createObject('FlieDispose', [this.fileSlicingObjectFactory])
            //分片下载并生成文件
            flieDispose.bottomHttp(this.httpPathlDownload, this.httpPathFileInfo, this.md5, this.name)
        }
    }
    bottomFileShow() {
        this.VNode.getElementsByClassName('stop')[0].style.display = 'none'
        this.VNode.getElementsByClassName('continue')[0].style.display = 'none'
        this.VNode.getElementsByClassName('bottomFile')[0].style.display = 'inline-block'
        this.VNode.getElementsByClassName('remove')[0].style.display = 'inline-block'
    }
    getAllInputs(value) {
        var allInputs = this.VNode.querySelectorAll(".bar-input");
        var input = allInputs[0];
        var barClass = input.parentNode.className.split(" ")[1];
        var styleEl = document.head.appendChild(document.createElement("style"));
        var indicator = input.parentNode.querySelector('.bar .indicator');
        this.setBarIndicator(barClass, value, styleEl, indicator);
    }

    setBarIndicator(barClass, value, styleEl, indicatorEl) {
        styleEl.innerHTML =
            "." + barClass + " .bar-face.percentage:before {width:" + value + "%;}";
        indicatorEl.style.marginLeft = 10 + '%';
        indicatorEl.textContent = value + '%';
    }

}

